<!--<template>-->
<!--  <div>-->
<!--    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Title">-->
<!--      <el-row :gutter="15">-->
<!--        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">-->
<!--          <el-col :span="23">-->
<!--            <el-row type="flex" justify="center" align="middle" gutter="2">-->
<!--              <el-col :span="12">-->
<!--                <el-form-item label="密码" prop="field109">-->
<!--                  <el-input v-model="formData.field109" placeholder="请输入密码" clearable show-password-->
<!--                    :style="{width: '100%'}"></el-input>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </el-col>-->
<!--          <el-col :span="23">-->
<!--            <el-row type="flex" justify="center" align="top" gutter="15">-->
<!--              <el-col :span="12">-->
<!--                <el-form-item label="账号" prop="field108">-->
<!--                  <el-input v-model="formData.field108" placeholder="请输入账号" clearable-->
<!--                    :style="{width: '100%'}"></el-input>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </el-col>-->
<!--          <el-col :span="23">-->
<!--            <el-row type="flex" justify="center" align="middle" gutter="15">-->
<!--              <el-col :span="8">-->
<!--                <el-form-item label="按钮" prop="field115">-->
<!--                  <el-button type="primary" icon="el-icon-search" size="medium"> 主要按钮 </el-button>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </el-col>-->
<!--          <el-col :span="24">-->
<!--            <el-row gutter="15">-->
<!--              <el-col :span="6">-->
<!--                <el-form-item label="培训名称" prop="field118">-->
<!--                  <el-input v-model="formData.field118" placeholder="请输入培训名称" clearable-->
<!--                    :style="{width: '100%'}"></el-input>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--              <el-col :span="6">-->
<!--                <el-form-item label="培训课件" prop="field119">-->
<!--                  <el-select v-model="formData.field119" placeholder="请输入培训课件" clearable-->
<!--                    :style="{width: '100%'}">-->
<!--                    <el-option v-for="(item, index) in field119Options" :key="index" :label="item.label"-->
<!--                      :value="item.value" :disabled="item.disabled"></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--              <el-col :span="6">-->
<!--                <el-form-item label="备注内容" prop="field120">-->
<!--                  <el-input v-model="formData.field120" type="textarea" placeholder="请输入备注内容"-->
<!--                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--              <el-col :span="6">-->
<!--                <el-form-item label="单行文本" prop="field121">-->
<!--                  <el-input v-model="formData.field121" placeholder="请输入单行文本" clearable-->
<!--                    :style="{width: '100%'}"></el-input>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </el-col>-->
<!--        </el-form>-->
<!--      </el-row>-->
<!--      <div slot="footer">-->
<!--        <el-button @click="close">取消</el-button>-->
<!--        <el-button type="primary" @click="handleConfirm">确定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--  inheritAttrs: false,-->
<!--  components: {},-->
<!--  props: [],-->
<!--  data() {-->
<!--    return {-->
<!--      formData: {-->
<!--        field109: undefined,-->
<!--        field108: undefined,-->
<!--        field115: 1111,-->
<!--        field118: undefined,-->
<!--        field119: undefined,-->
<!--        field120: undefined,-->
<!--        field121: undefined,-->
<!--      },-->
<!--      rules: {-->
<!--        field109: [{-->
<!--          required: true,-->
<!--          message: '请输入密码',-->
<!--          trigger: 'blur'-->
<!--        }],-->
<!--        field108: [{-->
<!--          required: true,-->
<!--          message: '请输入账号',-->
<!--          trigger: 'blur'-->
<!--        }],-->
<!--        field118: [{-->
<!--          required: true,-->
<!--          message: '请输入培训名称',-->
<!--          trigger: 'blur'-->
<!--        }],-->
<!--        field119: [{-->
<!--          required: true,-->
<!--          message: '请输入培训课件',-->
<!--          trigger: 'change'-->
<!--        }],-->
<!--        field120: [{-->
<!--          required: true,-->
<!--          message: '请输入备注内容',-->
<!--          trigger: 'blur'-->
<!--        }, {-->
<!--          pattern: /^.{6,30}$/,-->
<!--          message: '请输入备注内容',-->
<!--          trigger: 'blur'-->
<!--        }],-->
<!--        field121: [{-->
<!--          required: true,-->
<!--          message: '请输入单行文本',-->
<!--          trigger: 'blur'-->
<!--        }],-->
<!--      },-->
<!--      field119Options: [{-->
<!--        "label": "课件1",-->
<!--        "value": 1-->
<!--      }, {-->
<!--        "label": "课件2",-->
<!--        "value": 2-->
<!--      }],-->
<!--    }-->
<!--  },-->
<!--  computed: {},-->
<!--  watch: {},-->
<!--  created() {},-->
<!--  mounted() {},-->
<!--  methods: {-->
<!--    onOpen() {},-->
<!--    onClose() {-->
<!--      this.$refs['elForm'].resetFields()-->
<!--    },-->
<!--    close() {-->
<!--      this.$emit('update:visible', false)-->
<!--    },-->
<!--    handleConfirm() {-->
<!--      this.$refs['elForm'].validate(valid => {-->
<!--        if (!valid) return-->
<!--        this.close()-->
<!--      })-->
<!--    },-->
<!--  }-->
<!--}-->

<!--</script>-->
<!--<style>-->
<!--</style>-->

<template>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        label="日期"
        width="180">
      <template v-slot="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
        label="姓名"
        width="180">
      <template v-slot="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>
